<template>
  <div class="container-box">
    <common-crud ref="crudRef" :table-props="{
      border: true,
      'row-key': 'id',
      'tree-props': { children: 'children' },
    }" @search="handleSearch">
      <template #table-header>
        <el-button v-permission="'system:menu:add'" type="primary" @click="handleAdd">
          新增
        </el-button>
      </template>
      <!-- 表格列 -->
      <el-table-column prop="title" label="菜单名称" />
      <el-table-column prop="icon" label="图标">
        <template #default="{ row }">
          <el-icon>
            <component :is="row.icon" />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由路径">
        <template #default="{ row }">
          {{ row.path === "undefined" ? "-" : row.path }}
        </template>
      </el-table-column>
      <el-table-column prop="level" label="层级">
        <template #default="{ row }">
          <el-tag :type="row.level === 0
            ? 'primary'
            : row.level === 1
              ? 'success'
              : 'warning'
            " effect="plain">
            {{ row.level === 0 ? "菜单" : row.level === 1 ? "页面" : "按钮" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="permission" label="按钮标识">
        <template #default="{ row }">
          {{ row.permission ? row.permission : "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="hidden" label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.hidden ? 'success' : 'danger'" effect="plain">
            {{ row.hidden ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 操作列按钮 -->
      <template #operation="{ row }">
        <el-button v-permission="'system:menu:edit'" link type="primary" @click="handleEdit(row)">
          编辑
        </el-button>
        <el-button v-permission="'system:menu:del'" link type="danger" @click="handleDelete(row)">
          删除
        </el-button>
        <el-button v-permission="'system:menu:addChild'" v-if="row.level != 2" link type="primary"
          @click="handleAddSub(row)">
          添加子菜单
        </el-button>
      </template>


    </common-crud>
    <CommonDialog v-model="dialogVisible" :title="title" width="500px" @confirm="handleSubmit"
      @cancel="handleDialogClose" @close="handleDialogClose">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="图标" prop="icon" v-if="formData.level !== 2">
          <icon-select v-model="formData.icon" style="width: 100%" />
        </el-form-item>
        <el-form-item label="路由路径" prop="path" v-if="formData.level !== 2">
          <el-input v-model="formData.path" placeholder="请输入路由路径" />
        </el-form-item>
        <el-form-item label="权限标识" prop="permission" v-if="formData.level == 2">
          <el-input v-model="formData.permission" placeholder="请输入权限标识如system:user:add" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" />
        </el-form-item>
        <el-form-item label="类型" prop="level">
          <el-radio-group v-model="formData.level">
            <el-radio :label="0">菜单</el-radio>
            <el-radio :label="1">页面</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="hidden">
          <el-radio-group v-model="formData.hidden">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

    </CommonDialog>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import CommonCrud from "@/components/CommonCrud/index.vue"
import IconSelect from "@/components/IconSelect/index.vue"
import { getMenuList, editMenu, deleteMenu, addMenu } from "@/api/menu"
import { ElMessage, ElMessageBox } from "element-plus"

const crudRef = ref()

// 表单校验规则
const rules = {
  title: [{ required: true, message: "请输入名称", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
  icon: [{ required: true, message: "请选择图标", trigger: "blur" }],
  level: [{ required: true, message: "请选择层级", trigger: "blur" }],
  hidden: [{ required: true, message: "请选择状态", trigger: "blur" }],
  permission: [
    {
      required: true,
      message: "请输入权限标识",
      trigger: "blur",
    },
  ],
}
const formRef = ref()
onMounted(() => {
  crudRef.value.handleSearch()
})
const dialogVisible = ref(false)
const handleDialogClose = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
}
const formData = ref({
  parent_id: '',
  title: '',
  icon: '',
  path: '',
  permission: '',
  sort: 0,
  level: 0,
  hidden: true,
})
const title = ref("")
// 查询
const handleSearch = async (params: any) => {
  crudRef.value.loading = true
  try {
    const res = await getMenuList(params)
    if (res.code === 200) {
      crudRef.value.tableData = res.data.tree
      crudRef.value.total = res.data.total
    }
  } finally {
    crudRef.value.loading = false
  }
}

// 提交
const handleSubmit = async () => {
  await formRef.value.validate()
  if (title.value == "新增" || title.value == "添加子菜单") {
    const res = await addMenu(formData.value)
    if (res.code === 200) {
      ElMessage.success("添加成功")
      crudRef.value.handleSearch()
      handleDialogClose()
    }
  } else if (title.value == "编辑") {
    const res = await editMenu(formData.value.id, formData.value)
    if (res.code === 200) {
      ElMessage.success("保存成功")
      crudRef.value.handleSearch()
      handleDialogClose()
    }
  }
}

// 删除
const handleDelete = async (row: any) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await deleteMenu(row.id)
      if (res.code === 200) {
        ElMessage.success("删除成功")
        crudRef.value.handleSearch()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })

}

// 添加子菜单
const handleAddSub = (row: any) => {
  title.value = "添加子菜单"
  dialogVisible.value = true
  formData.value.parent_id = row.id
}

// 新增按钮处理函数
const handleAdd = () => {
  title.value = "新增"
  dialogVisible.value = true
}

// 编辑按钮处理函数
const handleEdit = (row: any) => {
  title.value = "编辑"
  dialogVisible.value = true
  formData.value = {...row}
}
</script>

<style lang="scss" scoped>

</style>